<template>
  <div id="login">
    <van-nav-bar :title="$t('login.loginAndResgin')" left-arrow @click-left="$router.go(-1)" />
    <div class="loginForm">
      <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="60" />

      <van-tabs>
        <van-tab :title="$t('login.title')">
          <!-- 登录 start -->
          <van-cell-group>
            <van-field
              :placeholder="$t('login.phoneInput')"
              v-model="loginInfo.mobile"
              left-icon="phone"
              :error-message="errorInfo.mobile"
            />
            <van-field
              :placeholder="$t('login.passTip')"
              v-model="loginInfo.password"
              left-icon="lock"
              :error-message="errorInfo.password"
              type="password"
            />
            <div style="margin: 16px;">
              <van-button round block type="info" @click="onLogin" plain>{{ $t('login.loginImmediately') }}</van-button>
            </div>
          </van-cell-group>
          <!-- 登录 end -->
        </van-tab>

        <van-tab :title="$t('login.resgin')">
          <!-- 注册 start -->
          <van-cell-group>
            <van-field
              left-icon="manager"
              :placeholder="$t('login.userName')"
              v-model="userInfo.username"
              :error-message="userRef.username"
            />
            <van-field
              left-icon="phone"
              :placeholder="$t('login.phoneInput')"
              v-model="userInfo.mobile"
              :error-message="userRef.mobile"
            />
            <van-field
              left-icon="lock"
              type="password"
              :placeholder="$t('login.passTip')"
              v-model="userInfo.password"
              :error-message="userRef.password"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="info" @click="postReg" plain>{{ $t('login.registerImmediately') }}</van-button>
          </div>
          <!-- 注册 end -->
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  data () {
    return {
      // 注册信息
      userInfo: {
        username: '',
        password: '',
        mobile: ''
      },
      userRef: {
        username: '',
        password: '',
        mobile: ''
      },
      // 登录信息
      loginInfo: {
        mobile: '',
        password: ''
      },
      // 登录的错误提示信息
      errorInfo: {
        mobile: '',
        password: ''
      }
    }
  },
  methods: {
    // 登录
    onLogin () {
      // 验证手机号
      let mobileRef = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
      if (!mobileRef.test(this.loginInfo.mobile)) {
        this.errorInfo.mobile = '手机号格式不正确'
        return false
      } else {
        this.errorInfo.mobile = ''
      }

      // 验证密码
      let passRef = /^[\w_-]{6,16}$/
      if (!passRef.test(this.loginInfo.password)) {
        this.errorInfo.password = '密码必须是6-16位字母数字_-组成！'
        return false
      } else {
        this.errorInfo.password = ''
      }

      this.$http
        .post('/access_tokens', this.loginInfo)
        .then(res => {
          // 登录成功
          if (res.data.ok === 1) {
            // 清除
            localStorage.clear()
            // 存令牌
            localStorage.setItem('token', res.data.token)
            // 存用户信息
            localStorage.setItem('userId', res.data.data.id)
            // 返回上一层
            this.$router.go(-1)
            // 登录成功的信息
            this.$toast.success(res.data.message)
          } else {
            // 登录失败的信息
            this.$toast.fail(res.data.error)
          }
        })
        .catch(e => {})
    },
    // 注册
    postReg () {
      let mobRef = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
      let passRef = /^[\w_-]{6,16}$/
      let userRef = /^[\u4e00-\u9fa5A-Za-z0-9-_]*$/

      // 手机号正则验证
      if (!mobRef.test(this.userInfo.mobile)) {
        this.userRef.mobile = '手机号码格式不正确'
        return false
      }

      // 昵称正则
      if (!userRef.test(this.userInfo.username)) {
        this.userRef.username = '只能中英文，数字，下划线，减号'
        return false
      }

      // 密码正则验证
      if (!passRef.test(this.userInfo.password)) {
        this.userRef.password = '密码必须是6-16位字母数字_-组成！'
        return false
      }

      this.$http.post('/register', this.userInfo).then(res => {
        if (res.data.ok === 1) {
          Dialog.alert({
            message: '注册成功！'
          }).then(() => {
            this.userInfo = {}
            this.$router.push('/login')
          })
        } else {
          Dialog.alert({
            message: res.data.error
          }).then(() => {

          })
        }
      }, error => error)
    }
  }
}
</script>

<style lang="less">
.loginForm {
  margin: 100px auto;
  text-align: center;
}
</style>
